<template>
	<div class="layout" v-loading="loading">
		<div class="onlineCourseDetail">
			<div style="display: flex; justify-content: space-between; margin-top: 20px">
				<Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
				<!-- <div class="backBtn" @click="goBack()">返回列表</div> -->
			</div>
			<div class="contentBox" v-if="video">
				<div class="leftDiv">
					<div class="topDiv">
						<div class="msgDiv">
							<div class="video-title">{{ video.companyTrain && video.companyTrain.title }}</div>
							<div class="contentText">简介：
								<!-- {{ video.companyTrain.content ? video.companyTrain.content.replace(/<[^<>]+>/g,"") : '无'}} -->
								<template v-if="video.companyTrain && video.companyTrain.content">
									<pre v-html="video.companyTrain && video.companyTrain.content"></pre>
								</template>
								<template v-else>
									无
								</template>
							</div>
						</div>
						<!-- <div class="sendBtn" @click="toSignUp">立即参与</div> -->
						<!-- <div class="sendBtn" @click="toSignUp" v-if="video.companyTrain.isApply == 0">立即参与</div>
						<el-button type="info" plain disabled v-else style="height: 40px;">已报名</el-button> -->
					</div>
					<vueVideoPlayerCom v-if="!loading" :src="video.companyTrain && video.companyTrain.video" :url="'onlineCourseDetail'" />
					<div class="tip" style="font-size: 13px;color: #aaa;margin-top: 5px;">（如遇视频加载错误的情况，请重新加载视频）</div>
				</div>

				<div class="video-wrap">
					<div class="relativeVideo">相关视频</div>
					<div v-if="video.relate && video.relate.length > 0">
						<relativeVideoFrame @refresh="refresh" class="videoFrame" v-for="item in video.relate" :video="item" :key="item.id" />
					</div>
					<div class="no-data-tip" v-else>暂无相关视频</div>
				</div>
			</div>
      <Buttons :buttons="buttons" @goBack="goBack" @toSignUp="toSignUp" class="btns"></Buttons>
		</div>
	</div>
</template>

<script>
	import Breadcrumb from '@/components/breadcrumb'
	import relativeVideoFrame from '@/components/helpCom/relativeVideoFrame'
	// api
	import { request, uploadFile } from '@/utils/request.js'
  import config from '@/utils/config.js'
  
  import { getonlineCourseDetail } from '@/common/api/training'
	// 引用视频插件
	import vueVideoPlayerCom from '@/components/vueVideoPlayerCom';
	export default {
		name: "onlineCourseDetail",
		meta: {
			name: '视频培训（在线课程）详情页'
		},
		components: { Breadcrumb, relativeVideoFrame, vueVideoPlayerCom },
    computed:{
      buttons(){
        let btns = [{text:"返回",type:"normal",size:"l",method:"goBack"}];
        if(this.video.companyTrain && this.video.companyTrain.isApply == 0){
          btns.push({text:"立即参与",type:"success",size:"l",method:"toSignUp"})
        }else {
          btns.push({text:"已报名",type:"success",size:"l",method:"none",disabled:"true"})
        }
        return btns
      }
    },
		data() {
			return {
				crumbs: [{
					label: '培训中心',
					value: 'training'
				}, {
					label: '企业培训-视频培训',
					value: 'trainingNotice',
				}, {
					label: '视频培训详情页',
					value: 'onlineCourseDetail',
					choose: true
				}],
				video: {},
				loading: false //加载状态
			}
		},
		mounted() {
			this.getonlineCourseDetail();
		},
		methods: {
			// 获取视频培训详情
			async getonlineCourseDetail(id) {
				this.loading = true;
				let ID = id ? id : this.$route.query.id;
				const { code, msg, data } = await getonlineCourseDetail(ID)
				this.loading = false;
				if (code != '200') return this.$message.warning(msg);
				// console.log("companyTrain.content",data.companyTrain.content);
				data.companyTrain.content = data.companyTrain.content.replace(/<img /g,"<img style='max-width:100%;height:auto'")
				this.video = data;
			},
			// 点击立即参与按钮
			toSignUp() {
				this.$CheckRole("线上课程报名", async () => {
					let formData = new FormData();
					formData.append('id', this.$route.query.id);
					const { code, msg } = await uploadFile(this, config.api.joinOnlineCourse, formData, 'POST');
					if (code != '200') return this.$message.warning(msg);
					this.$message.success('申请报名成功，请您准时参加培训！');
					this.video.companyTrain.isApply = 1;
				})
			},
			// 点击相关视频 - 更新视频数据
			refresh(id){
				this.getonlineCourseDetail(id);
			},
			goBack() {
				this.$router.back();
                // this.$router.push({ path: 'trainingNotice' });
			}
		}
	}
</script>

<style scoped>
  .btns{
    margin-bottom: 30px;
  }

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.onlineCourseDetail {
		width: 1200px;
		margin: 0 auto;
	}

	.onlineCourseDetail .backBtn {
		border: 1px solid #eeeeee;
		white-space: nowrap;
		font-size: 12px;
		height: 30px;
		width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
	}

	.onlineCourseDetail .backBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 5px #EEEEEE;
	}

	.onlineCourseDetail .contentBox {
		display: flex;
		width: 100%;
		margin: 20px 0 80px 0;
	}

	.onlineCourseDetail .leftDiv{
		width: 70%;
		text-align: left;
		margin-right: 42px;
	}

	.onlineCourseDetail .topDiv {
		margin-bottom: 25px;
		display: flex;
		justify-content: space-between;
	}

	.onlineCourseDetail .topDiv .video-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 25px;
		word-break: break-all;
	}

	.onlineCourseDetail .topDiv .contentText {
		color: #666666;
		font-size: 14px;
		word-break: break-all;
		overflow: hidden;
		width: 100%;
	}

	.onlineCourseDetail .topDiv .msgDiv {
		flex: 1;
		width: 100%;
	}

	.onlineCourseDetail .topDiv .sendBtn {
		flex-shrink: 0;
		width: 120px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #045db9;
		color: #ffffff;
		font-size: 14px;
		border-radius: 3px;
		transition: all 0.2s ease 0s;
		margin-left: 10px;
	}

	.onlineCourseDetail .topDiv .sendBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 10px #EEEEEE;
	}

	.onlineCourseDetail .videoImg{
		width: 100%;
		height: 506px;
	}

	.onlineCourseDetail .video-wrap {
		flex: 1;
		height: 100%;
	}

	.relativeVideo {
		border-left: 4px solid #045db9;
		font-size: 18px;
		height: 18px;
		line-height: 18px;
		color: #045db9;
		text-align: left;
		padding-left: 10px;
		margin-bottom: 8px;
	}
	.no-data-tip{
		background-color: #f8f8f8;
		font-size: 12px;
		color: #999999;
		text-align: center;
		height: 30px;
		line-height: 30px;
		margin-top: 15px;
	}
	.btnDiv {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		/* justify-content: right; */
		/* justify-content: flex-end; */
		/* margin-left: 200px; */
	}

	/* .btnDiv div {
		background-color: #f1f2f4;
		color: #045db9;
		font-size: 15px;
		border-radius: 5px;
		transition: all 0.2s ease 0s;
	}

	.btnDiv div:nth-child(1) {
    margin-right: 20px;
  }

	.btnDiv .btn {
		width: 100px;
		height: 40px;
		line-height: 40px;
		padding: 0;
		text-align: center;
	}

	.btnDiv div:hover {
		box-shadow: 0px 3px 5px #e1e1e1;
		cursor: pointer;
	} */
</style>